<template>
  <div class="my">
    <div class="my-nav" v-if="isLogin">
      <van-image
        class="my-img"
        round
        width="4rem"
        height="4rem"
        :src="ele.avatar"
      />
      <p class="my-p1">{{ ele.nickname }}</p>
      <!-- <router-link :to="{path:'/user',query:{userInfo:this.ele}}"> -->
      <div class="my-p2" @click="change" >编辑资料</div>
      <div class="my-t">
        <p class="my-p3">{{ ghg.publish_num }}</p>
        <p class="my-p4">头条</p>
      </div>
      <!-- </router-link> -->
      <div class="my-t2">
        <p>{{ ghg.liked_num }}</p>
        <p>获赞</p>
      </div>
      
    </div>
    
    <div class="my-nav" v-else>
      
      <p class="my-L" @click="login">登录/注册</p>
      
    </div>
    <div class="my-i">
      <div class="my-icon">
        <div class="my-icon-i"><van-icon name="star-o" size="30" /></div>

        <p @click="collectList">收藏</p>
      </div>
      <div class="my-icon1">
        <div class="my-icon1-i"><van-icon name="underway-o" size="30" /></div>

        <p>历史</p>
      </div>
    </div>

    <div class="my-us">
      <van-cell title="修改密码" is-link value="" to="/changePassword" />
      <van-cell title="联系我们" is-link value="" />
      <van-cell title="关于我们" is-link value="" />
    </div>
    <div class="my-out" v-if="isLogin">
      <van-cell title="退出登录" @click="logout"/>
    </div>

    <div class="home-nav">
      <van-tabbar v-model="active" route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="add-o" to="/publish">发布</van-tabbar-item>

        <van-tabbar-item icon="friends-o" to="/my">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import {Dialog} from 'vant';
import { mapState,mapMutations} from 'vuex';
import {Toast} from 'vant';
export default {
  name:'my',
  data() {
    return {
      active: 2,
      token_1: "",
      ele: "",
      ghg: "",
      skip:0,
      limit:10,
      uid:'',
      isLogin:false
    };
  },
  components:{
    [Dialog.Component.name]: Dialog.Component,
  },
  computed:{
    // ...mapState(['uid','token','userInfo',]),
    // uid(){
    //   return this.$store.state.uid
    // },
    // token(){
    //   return this.$store.state.token
    // },
  },
  created(){
    
    // let {uid,token,userInfo,isLogin} = localStorage
    
  },
  mounted() {
    this.uid = localStorage.getItem("uid");
    this.token_1 = localStorage.getItem("token");
    this.getData();
    if(this.uid){
      this.isLogin=true
    }else{
      this.isLogin=false
    }
  },
  methods: {
    ...mapMutations(['clear']),
    login(){
      this.$router.push('/login')
    },
    change() {
      this.$router.push("/user");
    },
    getData() {
      //获取用户信息
      this.$http
        .post("/user/getuserInfo", { token: this.token_1 })
        .then((res) => {
          console.log(res);
          this.ele = res.data.userInfo;
          this.ghg = res.data;
        });
    },
    async logout(){
      let resa = await Dialog.confirm({
        title:'提示',
        message:'您确认退出吗',
      })
      console.log(resa)
      if(resa=='confirm'){
        localStorage.clear();
        // this.$store.commit('clear')
        this.clear()
        this.isLogin=false
      }
    },
    
    //跳转到收藏列表
    collectList(){
      if(!this.uid){
          Toast('请先登录');
          setTimeout((v)=>{
            this.$router.push("/login")
          },500);
          return
        }
      this.$router.push('/getFavList')
      
    }

  },
};
</script>

<style lang="less">
.my-nav {
  position: relative;
  display: flex;

  height: 200px;
  background: url(../assets/banner.jpg) no-repeat;
  background-size: cover;
}
.my-img {
  position: absolute;
  left: 20px;
  top: 40px;
}
.my-p1 {
  position: absolute;
  top: 50px;
  left: 100px;
  color: white;
}
.my-p2 {
  text-align: center;
  font-size: 10px;
  background: white;
  width: 60px;
  height: 15px;
  border-radius: 50px;
  position: absolute;
  top: 67px;
  left: 300px;
}
.my-t {
  text-align: center;
  position: absolute;
  top: 120px;
  left: 78px;
  color: white;
}
.my-t2 {
  text-align: center;
  position: absolute;
  top: 120px;
  left: 267px;
  color: white;
}
.my-i {
  display: flex;
  width: 100%;
}
.my-icon {
  text-align: center;
  width: 50%;
  height: 70px;
  border-bottom: 5px solid rgb(249, 245, 245);
  border-right: 1px solid rgb(244, 240, 240);
}
.my-icon-i {
  height: 20px;
  margin-top: 10px;
}
.my-icon p {
  height: 5px;
}
.my-icon .van-icon {
  margin: 0 auto;
}
.my-icon1 {
  text-align: center;
  width: 50%;
  height: 70px;
  border-bottom: 5px solid rgb(249, 245, 245);
}
.my-icon1-i {
  height: 20px;
  margin-top: 10px;
}
.my-us {
  border-bottom: 5px solid rgb(249, 245, 245);
}
.my-out {
  text-align: center;
  border-bottom: 2px solid rgb(249, 245, 245);
}
.my-L{
  width: 70px;
  position: absolute;
  left: 160px;
  top: 100px;
  color: white;
}
// .van-cell__title{
//   color: red;
// }
</style>